<template>
  <div class="">
    <BHeader></BHeader>
    <!-- <Imgslider :bid="book.bid"></Imgslider> -->
    <div class="cotentW">
      <div class="product_intro" >
       <Carrousel :id="book.id" class="preview-wrap"></Carrousel>
    <div class="purchesArea">
    <div class="tag" v-if="book.newbook==true">新品</div>
    <div class="purchesTitle">{{book.purchesTitle}}</div>
    <div class="featureinfo">{{book.featureinfo}}</div>
    <div class="author">{{book.author}}&nbsp;著</div>
    <div class="priceArea">
      <div v-if="discount!=null && discount!=''">
      <div class="currPrice">现&nbsp;&nbsp;价&nbsp;&nbsp;&nbsp;￥&nbsp;&nbsp;<p style="display:inline-block;font-size:25px;color:red;">{{book.oriprice*discount*0.1}}</p></div>
      <div class="discount">[{{discount}}折]</div>
       <div class="originalPrice" v-if="(discount!=null)&&(discount!='')">[定价&nbsp;￥<strike>{{book.oriprice}}]</strike></div>
       <div class="coupon">优&nbsp;&nbsp;惠&nbsp;&nbsp;券&nbsp;&nbsp;<p v-if="(couponLimit!=null)&&(couponLimit!='')&&(couponValue!='')&&(couponValue!=null)" style="display:inline-block;color:red;">满{{couponLimit}}减{{couponValue}}</p></div>
      </div>
      <div v-if="discount==null || discount==''">
      <div class="currPrice">现&nbsp;&nbsp;价&nbsp;&nbsp;&nbsp;￥&nbsp;&nbsp;<p style="display:inline-block;font-size:25px;color:red;">{{book.oriprice}}</p></div>
       <div class="coupon">优&nbsp;&nbsp;惠&nbsp;&nbsp;券&nbsp;&nbsp;<p v-if="(couponLimit!=null)&&(couponLimit!='')&&(couponValue!='')&&(couponValue!=null)" style="display:inline-block;color:red;">满{{couponLimit}}减{{couponValue}}</p></div>
      </div>

      <div class="commentCount">
        <p v-show="book.commentCount == null">暂无评价</p>
        <p v-show="book.commentCount != null">累计评价</p>
      <p v-show="book.commentCount != null" style="color:blue;">{{book.commentCount}}</p>
      </div>
    </div>
    <div class="vas">增值业务  &nbsp;<p style="display:inline-block;border:1px solide blue;color:blue;"><i class="el-icon-refresh"></i>助力环保、传递知识、以旧换新</p></div>
    <div class="putInCar">
       <el-input-number size="small" v-model="num"  :min="1" :max="book.stocknum" label="描述文字"></el-input-number>
      <button class="addbutton" @click="addCar()">加入购物车</button>
      <button class="buybutton" @click="purches()">购买</button>
    </div>
    </div>
    </div>
   </div>
<div class="comments">
<CommentArea :bid="book.id"></CommentArea>
</div>
 </div>

</template>

<script>

import BHeader from '../../components/BHeader.vue'
import Bfooter from '../../components/BFooter.vue'
import Carrousel from '../../components/Carrousel.vue'
import CommentArea from '../../components/CommentArea.vue'
import {getBookDetail} from '../../api/Book/book'
import {addToCar} from '../../api/car/car'
import {getActivityDetail} from '../../api/activity/activity'
export default {
  
    components :{
      BHeader,
      Bfooter,
      Carrousel,
      CommentArea
  },
 name: 'BookDetail',
   data(){
    return {
     book:{},
        value: '',
        num:'0',
        couponLimit:'',
        couponValue:'',
        discount:'',
        id:""
    }
},
methods: {
  getBook(bid){
    let _this=this;
    getBookDetail(bid).then((res)=>{
      if(!res.flag){
        his.$router.go(-1);
      }
      _this.book=res.data
      if(res.data.aid != 'null'){
          getActivityDetail(res.data.aid).then((resp)=>{
        if(resp.flag&&resp.data!=null){
           this.couponLimit= resp.data.couponLimit,
          this.couponValue=resp.data.couponValue
          this.discount = resp.data.discount
        }
      })
      }
    })
  },
  purches(){
    
    if(this.$store.getters.token == null || this.$store.getters.token == "" || this.$store.getters.token== undefined){
      this.$message.info("请先登录")
      return 
    }
    let fprice = (this.discount == ''|| this.discount == null) ? this.book.oriprice:this.book.oriprice*this.discount*0.1;
    let orderinfo = {
      couponLimit:this.couponLimit,
      couponValue:this.couponValue,
      bid:this.book.id,
      num:this.num,
      bname:this.book.bname,
      price: fprice
    };
     localStorage.removeItem("orderinfo")
     localStorage.removeItem("cartOrder")
    localStorage.setItem("orderinfo",JSON.stringify(orderinfo))
    this.$router.push('/beforecreorder')
  },
  addCar(){
  
    if(this.$store.getters.token == null || this.$store.getters.token == "" || this.$store.getters.token== undefined){
      this.$message.info("请先登录")
      return 
    }
   let carVo={
      uid:this.$store.getters.uid,
      bid: this.book.id,
      aid:this.book.aid,
      number: this.num
   }
    addToCar(carVo).then((res)=>{
      if(res.flag){
        this.$message.success("添加成功")
      }
       })
  },

},
created()
{
this.getBook(this.$route.query.bid)
this.book.id=this.$route.query.bid
}
}
</script>


<style  scoped>
.vas
{
  position: relative;
  text-align: left;
  top: 20%;
  left: 1%;
}
.addbutton
{
  color: white;
   background-color: red;
   box-shadow: none;
   border-style: none;
   font-weight: bolder;
   font-size: 20px;
   padding: 15px;
   position: absolute;
   top: -15%;
   left: 25%;
   display: block;
   cursor: pointer;
   border-radius: 15px; 
}
.buybutton
{
    color: white;
   background-color:orange;
   box-shadow: none;
   border-style: none;
   font-weight: bolder;
   font-size: 20px;
   padding: 15px;
   position: absolute;
   top: -15%;
   left: 50%;
   display: block;
   cursor: pointer;
   border-radius: 15px; 
}
.putInCar
{
   position: relative;
  text-align: left;
   left:1%;
   top: 40%;
}
.distribution
{
  position: relative;
  text-align: left;
   left:1%;
   top: 25%;
}
.preview-wrap
{
  width: 352px;
  position: relative;
 left: 10%;
  margin-top: 5%;
  padding-bottom: 15px;
}
.purchesArea
{
  border: 1px solid black;
  position: relative;
 left: 48%;
  margin-top: -48%;
  width: 590px;
  height: 685.94px;
position: relative;
}
.tag
{
  color:white;
  background: green;

 position: absolute;
 top:8px;
 left: 5px;
   text-align: left;
}
.purchesTitle
{
 position: absolute;
 top:5px;
 left: 45px;
  color: grey;
 font-weight: bolder;
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 20px;
    text-align: left;
}
.featureinfo
{
  position: absolute;
  top: 35px;
  left: 5px;
  color: red;
    text-align: left;
}
.author
{
  position: absolute;
   top: 60px;
  left: 5px;
  text-align: left;
}
.priceArea
{
  position: relative;
  top:100px;
  background: lightgray;
  height: 90px;
}
.currPrice
{
  position: absolute;
  left: 5px;
  top: 5px;
  text-align: left;

}
.discount
{
 position: absolute;
 left: 158px;
 top: 12px;
}
.originalPrice
{
 position: absolute;
 left: 208px;
 top: 12px;
 font-style: unset;
}
.coupon
{
   position: absolute;
 left: 5px;
 top: 50px;
}
.commentCount
{
 position: absolute;
 right:5px;
 top: 20px;
 padding: 2px;
 border-left:1px solid grey;
}
.cotentW
{
  margin: 0 auto;
  width: 1210px;

}
.product_intro
{
  position: relative;
  margin-bottom: 10px;
  margin-top: 10px;
}
.product_intro::after
{
  content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.comments
{
  margin-top: 50px;
}
</style>
